<template>
    <div class='contentUi'>
        <span class="label">{{label}}</span>
        <div class="components">
            <el-autocomplete
                v-model="school"
                :fetch-suggestions="schoolQuerySearchAsync"
                clearable
                @clear='selectSchool()'
                @select="selectSchool"
                @blur="blurSchool(school)"
            ></el-autocomplete>
        </div>
    </div>
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex';
import {schooloptions} from '@/static/js/select_data.js';
   export default {
    data() {
        return {
            label: '学校',
            resulsArray : [],
            school:''
        }
    },
    computed: {
        //测试数据是否传输
        ...mapState({
            getAutocomplete_school:state=>state.pubilcModule.autocomplete_school
        }),
    },
    watch: {
        school(){
           this.setAutocomplete_school(this.school);
        },
        getAutocomplete_school(){
            //监听重置
            if(this.getAutocomplete_school === ''){
                this.school = '';
            }
        }
    },
    methods: {
        //设置vuex内部autocomplete_school的值
        ...mapMutations({
            setAutocomplete_school:'pubilcModule/setAutocomplete_school'
        }),
        schoolQuerySearchAsync(queryString, cb){
            this.resulsArray = [];
            cb([]);
            if(queryString != null && queryString !== ''){
                //过滤含有queryString的字段
                let resuls = schooloptions.filter(item=>{
                    if(item.value.indexOf(queryString)!= -1){
                        this.resulsArray.push(item);
                    }
                })
                cb(this.resulsArray);
            }
        },

        //选择
        selectSchool(item){
            //判断
            if(this.rexValue(item)){
                //赋值
                this.setValue(item);
            }
        },

        //失去焦点
        blurSchool(item){
            //判断
            if(this.rexValue(item)){
                for(let i of schooloptions){
                    if(i.value == item){
                        //赋值
                        this.setValue(i);
                    }
                }
            }
        },

        //赋值
        setValue(obj){
            if(this.school.length<=24){
                this.school = obj.value;
                this.setAutocomplete_school(this.school);
            }else{
                this.school = "";
                this.$message.error("长度不大于24位!");
            }
        },
        //判断
        rexValue(item){
            if(item == null || item === ''){
                this.resulsArray = [];
                this.school = '';
                return false;
            };
            return true;
        }
    },
   }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
